<template>
  <div class="dia">
    <el-dialog v-model="dialogVisible" title="管线老化分析" width="600px" draggable :modal="false"
      :close-on-click-modal="false" :destroy-on-close="true">
      <div class="con">
        <div class="head">
          <el-form :inline="true" :model="formInline">
            <el-form-item label="图层类型">
              <el-select v-model="formInline.keyword" placeholder="请选择" clearable style="width: 120px"
                @change="changeSelect">
                <el-option label="燃气管线" value="line" />
                <!-- <el-option label="燃气管点" value="point" /> -->
              </el-select>
            </el-form-item>
            <el-form-item label="权属单位">
              <el-input v-model="formInline.qsdw" style="width: 220px" placeholder="请输入权属单位" />
            </el-form-item>
            <el-form-item label="超出年限">
              <el-input v-model="formInline.exceed" style="width: 120px" type="number" placeholder="请输入超出年限" />
            </el-form-item>
            <el-form-item label="查询范围">
              <el-radio-group v-model="radio1">
                <el-radio value="1" size="large" border>全图</el-radio>
                <el-radio value="2" size="large" border>指定范围</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-button v-if="radio1 === '2'" @click="clickBtn('绘制')">绘制</el-button>
              <el-button v-if="radio1 === '2'" @click="clickBtn('清除绘制')">清除绘制</el-button>
              <el-button type="primary" @click="clickSq">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="body">
          <el-table :data="tableData" border style="width: 100%" max-height="250" v-if="formInline.keyword === 'line'">
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="" label="唯一编码" width="100" />
            <el-table-column prop="startPoint" label="起点号" width="100" />
            <el-table-column prop="endPoint" label="终点号" width="100" />
            <el-table-column prop="type" label="管线类型" width="100" />
            <el-table-column prop="gxType" label="管线子类型" width="100" />
            <el-table-column prop="startMs" label="起点管顶高程(米)" width="120" />
            <el-table-column prop="startMs" label="终点管顶高程(米)" width="120" />
            <el-table-column prop="startMs" label="起点埋深(米)" width="120" />
            <el-table-column prop="endMs" label="终点埋深(米)" width="120" />
            <el-table-column prop="" label="缆线根数" width="100" />
            <el-table-column prop="addTime" label="建设时间" width="100" />
            <el-table-column fixed="right" label="操作" min-width="80">
              <template #default="scope">
                <el-button size="small" @click="handleClick(scope.row.geom.coordinates, '管线')">定位</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-table :data="tableData" border style="width: 100%" max-height="250" v-if="formInline.keyword === 'point'">
            <el-table-column type="index" label="序号" width="60" />
            <el-table-column prop="sheng" label="省" width="100" />
            <el-table-column prop="shi" label="市" width="100" />
            <el-table-column prop="xian" label="县" width="100" />
            <el-table-column prop="tsdh" label="图上点号" width="100" />
            <el-table-column prop="gch" label="工程号" width="100" />
            <el-table-column prop="type" label="管线类型" width="100" />
            <!-- <el-table-column prop="type" label="管线子类型" width="100" /> -->
            <el-table-column prop="ms" label="埋深" width="100" />
            <el-table-column prop="cc" label="管径/断面尺寸" width="120" />
            <el-table-column prop="cz" label="材质" width="100" />
            <el-table-column prop="tz" label="特征" width="100" />
            <el-table-column prop="addTime" label="建设时间" width="100" />
            <el-table-column prop="fsw" label="附属物" width="100" />
            <el-table-column prop="pointYl" label="管点压力" width="100" />
            <el-table-column prop="x" label="x坐标" width="100" />
            <el-table-column prop="y" label="y坐标" width="100" />
            <el-table-column prop="dmGc" label="地面高程(米)" width="120" />
            <el-table-column prop="jbs" label="井深(米)" width="100" />
            <el-table-column fixed="right" label="操作" min-width="80">
              <template #default="scope">
                <el-button size="small" @click="handleClick(scope.row.geom.coordinates)">定位</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination size="small" background layout="prev, pager, next, total" :total="searchForm.total"
            class="mt-4" @current-change="handleCurrentChange" />
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import ManageService from '@/service/manage.service'
const props = defineProps({
  PipelineAgingVisible: {
    type: Boolean,
    default: ''
  },
  PipelineAgingArr: {
    type: Array,
    default: []
  }
})
const emits = defineEmits([
  'update:PipelineAgingVisible',
  'listenPipelineAging'
])
const radio1 = ref('1')
const tableData = ref([])
const dialogVisible = computed({
  get: () => props.PipelineAgingVisible,
  set: (val) => {
    emits('listenPipelineAging', '关闭弹窗')
  }
})
const formInline = ref({
  keyword: 'line',
  qsdw: '',
  exceed: 0
})
const searchForm = ref({
  totle: 0,
  current: 1,
  size: 10
})
const handleClick = (coordinates, type) => {
  emits('listenPipelineAging', '定位', coordinates, type)
}
const clickBtn = (type) => {
  // if (type === '清除绘制') {
  //   props.PipelineAgingArr = []
  // }
  emits('listenPipelineAging', type)
}
const clickSq = () => {
  getPage()
}
const changeSelect = () => {
  tableData.value = []
}
const getPage = () => {
  let coordinates = []
  if (radio1.value === '2' && props.PipelineAgingArr.length === 0) {
    ElMessage.error('请先在地图上框选区域')
    return
  }
  if (radio1.value === '2') {
    coordinates = props.PipelineAgingArr
  }
  ManageService.post_line_ageing({
    current: searchForm.value.current,
    size: searchForm.value.size,
    qsdw: formInline.value.qsdw,
    exceed: formInline.value.exceed ? formInline.value.exceed : 0,
    // keyword: formInline.value.keyword,
    geom:
      coordinates.length === 0
        ? null
        : {
          type: 'Polygon',
          crs: { type: 'name', properties: { name: 'EPSG:4490' } },
          coordinates: coordinates
        }
  }).then((res) => {
    if (res.data.records) {
      searchForm.value.total = res.data.total
      tableData.value = res.data.records
    }
  })
}
const handleCurrentChange = (val) => {
  searchForm.value.current = val
  getPage()
}
</script>
<style lang="scss" scoped>
.dia {
  color: #000;

  :deep(.el-form-item__label) {
    color: #fff;
  }

  &> :deep(div) {
    pointer-events: none;
  }

  :deep(.el-dialog) {
    pointer-events: auto !important;
    background: rgba(1, 25, 53, 0.8);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    border: 1px solid rgba(219, 238, 175, 0.2);
    color: #fff;
    position: absolute;
    border-radius: 4px;
    left: 10px;
    bottom: 0;

    .el-dialog__headerbtn .el-dialog__close,
    .el-dialog__title {
      color: #fff;
    }
  }

  .con {
    display: flex;
    flex-wrap: wrap;
    margin: 0 10px;

    .body {
      width: 100%;

      :deep(.el-table) {
        .el-table__cell {
          padding: 4px 0;
          background-color: #052145 !important;
        }

        th.el-table__cell {
          background-color: #052145 !important;
        }
      }
    }

    .mt-4 {
      margin-top: 10px;
      text-align: right;
      float: right;

      :deep(.el-pagination__total) {
        color: #fff;
      }
    }
  }
}
</style>
